<template>
  <div class="dashboard-container">
    <div class="app-container">
      <template>
        <slot name="header">
          <h2>这是一个插槽</h2>
        </slot>
        <el-tabs v-model="active">
          <el-tab-pane label="角色管理" name="role">
            <el-row :style="{'height': '50px'}">
              <el-button type="success" :loading="true" size="small">新增角色</el-button>
            </el-row>
            <!-- 添加按钮 -->
            <el-table
              border
              style="width: auto"
              :data="rolelists"
            >
              <el-table-column
                prop="id"
                label="序号"
                width="200"
              />
              <el-table-column
                prop="name"
                label="角色名称"
                width="200"
              />
              <el-table-column
                prop="description"
                label="描述"
                width="270"
              />
              <el-table-column
                prop="address"
                label="操作"
              >
                <el-button type="warning">分配权限</el-button>
                <el-button type="primary">编辑按钮</el-button>
                <el-button type="danger">删除按钮</el-button>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row type="flex" justify="center">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
              />
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="corporation">
            <el-form label-width="80px">
              <el-form-item label="公司名称">
                <el-input v-model="CompanyFrom.name" disabled />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="CompanyFrom.companyAddress" disabled />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="CompanyFrom.mailbox" disabled />
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="CompanyFrom.remarks" type="textarea" disabled />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </template>
    </div>
  </div>
</template>

<script>
import { getRoles, getCompany } from '@/api/setting'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      // 导航栏默认选中
      active: 'role',
      // 定义公司信息
      CompanyFrom: {},
      // 定义页码和每条页数
      RolepageList: {
        page: 1,
        pagesize: 10
      },
      // 角色列表
      rolelists: [],
      // 总数量
      total: 0
    }
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  // 数据获取之后， 渲染之前
  created() {
    this.GetRoles()
    this.GetCompany()
  },
  // 函数方法
  methods: {
    // 获取全部角色信息
    async GetRoles() {
      const result = await getRoles(this.RolepageList)
      this.rolelists = result.rows
      this.total = result.total
      console.log(result)
    },
    // 获取公司信息
    async GetCompany() {
      // console.log(this.userInfo)
      this.CompanyFrom = await getCompany(this.userInfo.userId)
    }
  }
}
</script>

<style>

</style>
